/* 
* @Author: mowencong
* */
#baiyang{
    width: 100%;
    min-width:1230px;
    #top{
        width: 100%;
        background:#FAFAFA;
        .top_l{
            height: 30px;
            .wel{
                height: 30px;
                line-height: 30px;
                font-size:14px;
                a{color:#000;padding:0 2px}
            }   //wel
        }   //top_l
        .top_r{height: 30px;
            .top_r_list{
                height: 30px;
                li{z-index:999;}
                .list0{
                    position:relative;
                    float:left;
                    margin-left:18px;
                    font-size:14px;
                    line-height: 30px;
                    color:#777777;
                    .font{display:inline-block;margin-left:5px;color:#777777;font-weight:normal;}
                    .li-list{
                        z-index:999;
                        position:position;
                         dl{
                        display:none;
                        
                        dt{height: 30px;line-height: 30px;text-align:center;cursor:pointer;z-index:999;&:hover{background:#FAFAFA;}}
                        a{color:#777;text-decoration:none;}
                    }   //dl
                    }
                   
                    

               &:hover{box-shadow:0 0 1px 0;background:#fff;}
               &:hover dl{display:block;}
               &:hover .font{transform:rotate(180deg);transition-duration:1s;}

               }    //list0
            }   //top_r_list


        }   //top_r
    }   //top

    // header
    #header{
        width: 100%;
        .header-l h1{
            width: 220px;
            height: 60px;
            background:url(../img/logo.png)no-repeat;
            text-indent:-10000px;
            margin:38px 0;

        }//h1
        .header-c {
            margin:48px 0;
            margin-left:50px;
            .search-l{
                width: 70px;
                height: 40px;
                text-align:center;
                border-radius:0;
            &:hover .menu{display:block;}}//.search-l
            .menu{margin: 0;min-width: 70px;text-align:center;
                border-radius:0;
                .menu li{height: 50px;line-height: 50px;}
            }//menu
            .search-c{
                width: 425px;
                border:1px solid #ccc;
                height: 40px;
                border-radius:0;
            }//search-c
            .search-r{
                width: 60px;
                height: 40px;
                background:#EF3C79;
                color:#fff;
                font-size:14px;
                text-align:center;
                line-height: 40px;
            }//search-r
            .header-list{
                    margin-top:8px;
                 li{
                float:left;
                a{
                    font-size:14px;
                    margin-right:12px;
                    color:#777;
                    text-decoration:none;
                }
            }
            }//header-lis
        }//header-c
        .header-r{
            margin:48px 0;
            div{
                width: 130px;
                height: 40px;
                line-height: 40px;
                text-align:center;
                background:#FAFAFA;
                box-shadow:0 0 1px 0;
                z-index:-9999;
            }
            .shop{
                position:relative;
                margin-right:10px;
                z-index:3;
                &:hover .shop-list{display:block;border:none;}
                &:hover{background:#fff;}
                &:hover .up{transform:rotate(180deg);transition-duration:1s;}
                .shop-list{
                    position:absolute;
                    width: 350px;
                    height: 235px;
                    right:0;
                    background:#fff;
                    display:none;
                    .dl0{ 
                        background:#fff;
                        font-size:14px;

                        .dt1{
                            height: 50px;
                            line-height: 50px;
                            background:#fff;
                            border-bottom:1px solid #ccc;
                            text-align:right;
                            a{color:#f00;}
                            i{color:#f00;}
                        }
                        .dl1{width: 175px;border-right:1px solid #ccc;
                            dd{height: 30px;line-height: 30px;
                                text-align:left;
                                margin-left:10px;
                                a{color:#f00;text-decoration:none;}
                            }
                        }
                        .dl2{
                            dd{height: 30px;line-height: 30px;
                                a{color:#f00;text-decoration:none;}
                                i{color:#f00;}
                            }
                        }
                            background:#ccc;
                            .dt2{margin:0 10px;border-top:1px solid #ccc;
                                line-height: 40px;
                                a{margin-left:145px;color:#f00;text-decoration:none;}
                            }

                }//dl
                .ts{position:absolute;width: 100%;height: 30px;margin-top:130px;text-align:center;line-height: 30px;}
                }//shop-list
                
            }//shop
            .cart{
                position:relative;
                z-index:3;
                .cart-list{
                    position:absolute;
                    width: 345px;
                    right:-1px;
                    border:1px solid #ccc;
                    background:#fff;
                    display:none;
                    li{height: 50px;line-height: 50px;text-align:left;}
                    li:nth-child(1){border-bottom:1px solid #ccc;padding-left:10px;}
                    li:nth-child(3){background:#ccc;text-align:right;padding-right:10px;}
                    .js{background:#EF3C79;}
                }
                &:hover{border-bottom:none;background:#fff;}
                &:hover .cart-list{display:block;}
                &:hover .up{transform:rotate(180deg);transition-duration:1s;}
                
            }
            i{color:#ccc;margin-right:10px;}
            .up{margin-left:5px;}
        }
    }//#header

    // nav
    #nav{width: 100%;
        .nav-list{
            width: 720px;
            height: 38px;
            .all{
                position:relative;
                width: 210px;
                height: 38px;
                line-height: 38px;
                background:#EF3C79;
                color:#fff;
                font-size:14px;
                i{margin:0 10px;}
            .sanji{
                position:absolute;
                z-index:999;
                background:#F6F7F2;
                display:none;
                .sanji0{
                    position:relative;
                    .sanji00{
                        display:block;
                        color:#000;
                        width: 210px;
                        padding-left:20px;
                    }
                &:hover{background:#fff;}
                &:hover .sanji00{padding-left:30px;transition-duration:1s;}
            }
            .sanji01:hover .sanji1{display:block;}
            }
            .sanji1{
                position:absolute;
                left:210px;
                top:0px;
                z-index:999;
                width: 990px;
                height: 500px;
                background:#fff;
                display:none;
                .sanji11{
                    margin-left:30px;
                    height: 50px;
                    li{
                        float:left;
                        background:#999;
                        margin:10px;
                        a{
                            display:block;
                            height: 30px;
                            line-height: 30px;
                            text-align:center;
                            width:80px;
                            color:#000;
                        }
                    }
                }
                .sanji2{
                    height: 30px;
                    margin:10px;

                    p{
                        line-height: 20px;
                        display:inline-block;
                        margin-left:80px;
                        a{color:#000;}
                        span{color:#000;margin-left:10px;}
                    }
                    .sanji3{
                        height: 30px;
                        margin-left:20px;
                        display:inline-block;
                        border-bottom:1px solid #999;
                    li{
                        float:left;
                        a{
                           display:block;
                            height: 20px;
                            line-height: 20px;
                            text-align:center;
                            width:80px;
                            color:#000; 
                            border-right:1px solid #999;
                        }
                        .sanji111{border-left:1px solid #ccc;}
                        .sanji55{border-right:none;}
                    }
                }
                }
                .sanji4{
                    height: 50px;
                    margin:10px;
                   p{
                        line-height: 20px;
                        display:inline-block;
                        margin-left:80px;
                        a{color:#000;}
                        span{color:#000;margin-left:10px;}
                    }
                    .sanji5{
                        display:inline-block;
                        margin-left:10px;
                        height: 30px;
                        li{
                            float:left;
                            a{
                            display:block;
                            height: 20px;
                            line-height: 20px;
                            text-align:center;
                            width:80px;
                            color:#000; 
                            border-right:1px solid #999;
                            }
                        }
                    }
                }
                
            }
        &:hover .sanji{display:block;}}
        .navlist{
            margin-bottom:0;
            li{
                float:left;
                a{
                    height: 38px;
                    margin-right:46px;
                    line-height: 38px;
                    color:#000;
                    font-size:16px;
                    font-weight:bold;
                    text-decoration:none;
                }
            &:hover a{color:#EF3C79}}
            .index{margin-left:25px;}
            .last{margin-right:0;}
        }
        }//nav-list
        .page{
            width: 100%;
            margin-top:1px;
            border-bottom:2px solid #EF3C79;}

    }//nav

//main-nav
    #main-nav{
        widows: 100%;
        height: 40px;
            ul{
                height: 40px;
                margin-bottom:0;
             li{
            float:left;
            height: 40px;
            line-height: 40px;
            color:#999999;
            font-size:14px;
            margin-right:10px;
            a{
                display:inline-block;
                width: 60px;
                height: 60px;
                text-decoration:none;
                text-align:center;
                line-height: 40px;
                color:#000;
                i{
                    margin-right:20px;
                }
            }
            }
        }
        
    }
    //main-nav
    

    //datalist
    .datalist{
        width: 100%;
        height: 467px;
        //data-l
        .datal{
            width: 370px;
            height: 467px;
            border:1px solid #ccc;
            .datal1{
                    position: relative;
                    float: left;
                    width: 360px;
                    height: 360px;
                    overflow: hidden;
                    text-align:center;
                .big{width: 360px;height: 360px;}
            }
            
            .minimg{
                width: 360px;
                height: 360px;
                background:#F9F9F9;
                img{
                    max-width: 220px;
                    max-height: 220px;
                    border:1px solid #EF3C79;
                }
                .min{border:1px solid #EF3C79;}
            }
            .shar{
                width: 370px;height: 40px;
                    a{
                        display:inline-block;
                        height: 30px;
                        width:80px;
                        line-height: 30px;
                        text-align:center;
                        border:1px solid #ccc;
                        color:#000;
                        margin:5px 5px;
                        &:hover{
                            background:#ccc;
                        }
                    }
            }
        }
    //data-l
    //data-r
    .datar{
        width: 830px;
        height: 467px;
        border:1px solid #ccc;
        .datar1{
            height: 86px;
            margin-left:20px;
            p{
                margin-bottom:0;
            }
            p:nth-child(1){
                height: 33px;
                line-height: 33px;
                color:#B029B1;
                font-size:14px;
            }
            p:nth-child(2){
                height: 53px;
                line-height: 53px;
                font-size:18px;
                color:#000;
            }
        }
        .datar2{
            height: 140px;
            background:#EDEDED;
            p{
                margin-left:20px;
            }
            p:nth-child(1){
                font-size:16px;
                height: 40px;
                line-height: 40px;
                span{
                    margin-right:30px;
                }
            }
            p:nth-child(2){
                height: 45px;
                line-height: 30px;
                span{
                    margin-right:30px;
                }
                span:nth-child(2){
                    font-size:30px;
                    color:#EF3C79;
                    font-weight:bold;
                }
            }
            p:nth-child(3){
                height:50px;
                line-height: 20px;
                span{
                    margin-right:20px;
                }
                a{
                    margin-left:20px;
                }
            }
        }
        .datar3{
            margin-left:18px;
            width: 743px;
            height: 243px;
            .datar31{
                height: 56px;
                line-height: 56px;
                span{
                    color:#B299B2;
                    font-size:14px;
                    margin-right:10px;
                }
                .have{
                    font-size:18px;
                    color:#EF3C79;
                    font-weight:bold;
                    margin-left:10px;
                }
               input{
                border:1px solid #ccc; 
                width: 95px;
                height: 30px;
               }
            }
            .datar32{
                height: 30px;
                line-height: 30px;
                font-size:14px;
                color:#ccc;
                span:nth-child(1){
                    margin-right:10px;
                }
            }
            .datar33{
                height: 48px;
                line-height: 48px;
                input{
                    border:1px solid #ccc;
                    width:40px;
                    text-align:center;
                }
                button{
                    // position: absolute;
                    margin-left:-13;
                    display:inline-block;
                    width: 27px;
                    height: 25px;
                    text-align:center;
                    font-size:12px;
                    color:#ccc;
                    background:#fff;
                }
                .addnum{
                    top:-11px;
                    left:-1;
                }
                .jnum{
                    top:14px;
                    left:-27px;
                }
                .addcar{
                    display:inline-block;
                    height: 48px;
                    width: 130px;
                    line-height:48px;
                    color:#fff;
                    font-size:18px;
                    background:#EF3C79;
                    text-align:center;
                    margin:0 -10px;
                    a{
                        color:#fff;
                        text-decoration:none;
                    }
                    i{
                        color:#fff;
                    }
                }
                .buy{
                    display:inline-block;
                    height: 48px;
                    width: 130px;
                    line-height:48px;
                    background:#FFF4F8;
                    text-align:center;
                    margin-left:20px;
                    font-size:18px;
                    a{
                        color:#F03C79;
                        text-decoration:none;
                    }
                }
                .x{
                    width: 750px;
                    margin:0 40px;
                    margin-top:18px;
                    border-bottom:1px dotted #ccc;
                }
            }
            .datar34{
                height: 40px;
                margin-top:35px;
                p{
                height: 40px;
                line-height: 40px;
                color:#ccc;
                font-size:14px;
                img{
                    width:20px;
                    height:20px;
                    margin:0 10px;
                }
                }
            }
        }
       
    } //data-r
     .datar4{
        margin-top:20px;
            width:212;
            height:100%;
            .datar4-l{
                width: 212px;
                text-align:center;
                .datar4-l1{
                    height: 40px;
                    width:212px;
                    line-height: 40px;
                    color:#000;
                    border:1px solid #ccc;
                    img{
                        margin:0 10px;
                    }
                }
            }
            .datar4-l2{
                width: 212px;
                height:50px;
                line-height: 50px;
                border:1px solid #ccc;
                a{
                    display:inline-block;
                    width: 85px;
                    height: 30px;
                    line-height: 30px;
                    background:#F8F8F8;
                    color:#ccc;
                    margin:0 10px;
                }
            }
            .datar4-l3{
                margin-top:10px;
                width: 212px;
                height: 180px;
                border:1px solid #ccc;
                .xg{
                    display:block;
                    width: 210px;
                    height: 30px;
                    line-height: 30px;
                    font-size:16px;
                    margin-bottom:0;
                    background:#F7F7F7;
                    color:#000;

                }
                ul{
                    width: 212px;
                    height: 150px;                   
                    margin: 0;
                    padding: 0;
                    li{
                        float:left;
                        a{
                            display:inline-block;
                            height: 34px;
                            line-height: 34px;
                            width:105px;
                        }
                    }
                }
            }
        }
        .datar5{
            margin-top:20px;
            width: 980px;
            // border:1px solid #ccc;
            .datar51{
                width: 980px;
                height: 40px;
                border:1px solid #ccc;
                ul{
                    width: 400px;
                    height: 40px;
                    margin-bottom:0;
                    li{
                        float:left;
                        height: 40px;
                        line-height: 40px;
                        width: 125px;
                        padding:0 30px;
                        border:1px solid #ccc;
                    }
                }
                p{
                    display:inline-block;
                    height: 40px;
                    line-height: 40px;
                    width: 100px;
                    color:#ccc;
                    img{
                        width: 25px;
                        height:25px;
                    }
                }
            }
            .datar52{
                width: 980px;
                height:50px;
                line-height: 50px;
                border:1px solid #ccc;
                
                span{
                    display:inline-block;
                    height:50px;
                    width: 170px;
                }
            }
            .datar53{
                margin-top:45px;
                width: 980px;
                text-align:center;
            }
        }
    }//datalist























    //bottom
        #bottom{
            margin-top:45px;
            .bimg2{
                border-bottom:1px solid #ccc;
            }
        }
        //bottom
        //footer
        #footer{
            width: 100%;
            margin-top:35px;
            height: 250px;
            border-bottom:1px solid #ccc;
            .footer-l{
                width:260px;
                h1{ 
                    width: 220px;
                    height: 60px;
                    background:url(../img/logo.png)no-repeat;
                    text-indent:-10000px;}
                    .gz{margin-top:20px;margin-left:20px;
                        span{font-size:16px;margin-right:10px;}
                        a{margin-right:10px;}
                        .wb {
                            margin-top:10px;
                            img{width:100px;height:100px;}
                        }
                        
                    }
            }
            .footer-c{
                margin-top:25px;
                margin-left:50px;
                height: 242px;
                ul{
                    li{
                        float:left;
                        width:70px;
                        height: 40px;
                        line-height: 40px;
                        margin-right:80px;
                        font-size:16px;
                        font-weight:bold;
                        a{
                            display:block;
                            height: 30px;
                            line-height: 30px;
                            color:#000;
                            text-decoration:none;
                            font-weight:normal;
                            font-size:12px;
                        }
                    }
                }
            }
            .footer-r{
                margin-top:30px;
                width: 260px;
                height: 150px;
                .app{margin-left:20px;}
                .tp{
                    width:120px;
                    height:120px;
                    line-height: 110px;
                    text-align:center;
                    border:1px solid #ccc;
                }
                
                    .wz{
                    width:120px;
                    text-align:center;
                    font-size:14px;
                }
            }
        }
        #end{
            margin-top:25px;
            height: 150px;
            .end1{
                text-align:center;
                a{display:inline-block;padding:0 10px;height: 16px;line-height: 16px;font-size:16px;color:#000;text-decoration:none;}
                .end11{border-right:2px solid #666;}
            }
            .end2{text-align:center;height: 40px;line-height: 40px;}
            .end3{text-align:center;margin-bottom:50px;}
        }
        //footer
        .container {  /*内容、版心 提取 */
        width: 1230px;
        margin:0 auto;
    }   //container
    a:hover{text-decoration:none;}
    }   //#baiyang
    #side{
        position:fixed;
        height: 100%;
        // min-height:500px;
        width: 35px;
        right:0;
        top:0;
        background:#000000;
        margin:0 auto;
        text-align:center;
        .pos{
            position:absolute;
            top:15%;
        }
        .login{
            position:relative;
            width: 35px;
            height: 50px;
            line-height: 50px;
            margin-top:20px;
            margin-bottom:20px;
            a{
                display:block;
                width: 35px;
                height: 50px;
                border-radius:25px;
                img{ width: 35px;
                height: 30px;
                border-radius:25px;}
            }
        .details{
            position:absolute;
            width:100px;
            height:30px;
            line-height: 30px;
            left:-100px;
            top:15px;
            // border:1px solid #f60;
            background-color: #ccc;
            color:#fff;
            display:none;
        }
        .details::before,.details::after{
            content:'';
            position:absolute;
            top:5px;
            left:99px;
            border:8px solid transparent;
            border-left-color:#ccc;
        }
            
             &:hover{background:pink;}
             &:hover .details{display:block;}
             .form{
                position:absolute;
                width:500px;
                height:500px;
                border:1px solid #ccc;
                left:40px;
                top:10px;
                background:#fff;
                box-shadow:0 0 5px 0;
                // display:none;
                a{
                    color:#EF3C79
                }
                .log{
                    margin:10px 100px;
                    height: 80px;
                    label{
                    display:block;
                    margin-left:-125px;
                    width: 300px;
                    height: 30px;
                    a{
                        display:inline-block;
                        width: 100px;
                    }
                }
                input{
                    width:300px;
                    height:30px;
                    margin-top:-100px;
                    border:1px solid #ccc;
                }

                }
                .psw{
                    margin:10px 0;
                    height: 80px;
                    label{
                    margin:10px;
                    margin-left:30px;
                    display:block;
                    // margin-left:-125px;
                    width: 300px;
                    height: 30px;
                    a{
                        display:inline-block;
                        width: 100px;
                        margin-right:10px;
                    }
                }
                input{
                    width:300px;
                    height:30px;
                    margin-top:-100px;
                    border:1px solid #ccc;
                }
                }
                .code{
                    margin:10px 0;
                    height: 80px;
                    label{
                    margin:10px;
                    margin-left:12px;
                    display:block;
                    // margin-left:-125px;
                    width: 300px;
                    height: 30px;
                    a{
                        display:inline-block;
                        width: 100px;
                    }
                }
                input{
                    margin:10px auto;
                    width:300px;
                    height:30px;
                    margin-top:-100px;
                    border:1px solid #ccc;
                }

                }
                .lg{
                    margin:10px auto;
                    height: 50px;
                    width:300px;
                    background:#EF3C79;
                    a{
                        display:inline-block;
                        width: 100px;
                        color:#fff;
                    }
                }
                .zc{
                    margin-right:0;
                    height: 50px;
                    width:300px;
                    margin-left:210px;
                    a{
                        display:inline-block;
                        width: 100px;
                    }
                }
               
             }
        }
        .car{
            width: 35px;
            // top:21%;
            margin-bottom:20px;
            border-top:1px dotted #fff;
            border-bottom:1px dotted #fff;
            i{
                font-size:14px;
                color:#fff;}

            a{
                display:block;
                width: 35px;
                height: 110px;
                font-size:14px;
                color:#fff;
                padding:15px 10px;
                text-decoration:none;
            }
            &:hover{background:pink;}
        }
        .msg{
            position:relative;
            width: 35px;
            height: 50px;
            line-height: 50px;
            // top:37%;
            margin-bottom:20px;
            a{
                display:block;
                color:#fff;
                font-size:24px;
                text-decoration:none;
            }
             .details{
            position:absolute;
            width:100px;
            height:30px;
            line-height: 30px;
            left:-100px;
            top:10px;
            // border:1px solid #f60;
            background-color: #ccc;
            color:#fff;
            display:none;
        }
        .details::before,.details::after{
            content:'';
            position:absolute;
            top:5px;
            left:99px;
            border:8px solid transparent;
            border-left-color:#ccc;
        }
            &:hover{background:pink;}
            &:hover .details{display:block;}
        }
        .comp{
            position:relative;
            width:35px;
            height: 50px;
            line-height: 50px;
            // top:45%;
            // @extend .msg a;
            a{
                display:block;
                color:#fff;
                font-size:24px;
                text-decoration:none;
            }
            .details{
            position:absolute;
            width:100px;
            height:30px;
            line-height: 30px;
            left:-100px;
            top:10px;
            // border:1px solid #f60;
            background-color: #ccc;
            color:#fff;
            display:none;
        }
        .details::before,.details::after{
            content:'';
            position:absolute;
            top:5px;
            left:99px;
            border:8px solid transparent;
            border-left-color:#ccc;
        }
            &:hover{background:pink;}
            &:hover .details{display:block;}
        }
        .back{
            position:absolute;
            bottom:0;
            a{
                font-size:12px;
                color:#fff;
                text-decoration:none;
            }
            .details{
            position:absolute;
            width:100px;
            height:30px;
            line-height: 30px;
            left:-100px;
            top:10px;
            // border:1px solid #f60;
            background-color: #ccc;
            color:#fff;
            display:none;
        }
        .details::before,.details::after{
            content:'';
            position:absolute;
            top:5px;
            left:99px;
            border:8px solid transparent;
            border-left-color:#ccc;
        }
            &:hover{background:pink;}
            &:hover .details{display:block;}
        }
    }